<!--
 * @Author: Your Name you@example.com
 * @Date: 2025-06-30 16:27:18
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2025-06-30 18:37:04
 * @FilePath: \web\src\components\Scanner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="circle">
    <div class="circle-inner">
      <div class="circle-inner-inner">
        <div class="circle-circle"></div>
      </div>
      <ul class="circle-inner-list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="scss">
@function px-to-vw($px) {
  $base-width: 1920;
  @return ($px / $base-width) * 100+vw;
}

.circle {
  position: relative;
  width: 4.6vw;
  height: 4.6vw;
  top: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 2vw;
  // margin-right: 20px;
  border-radius: 50%;
  // // background-color: #fff;
  border: 0.3vw solid #3590d6;
  border-bottom: 0.3vw solid rgba($color: #000000, $alpha: 0);
}

.circle-inner-list {
  position: absolute;
  top: 0;
  left: 0;

  li {
    width: px-to-vw(3); // 3px -> 0.15625vw
    height: px-to-vw(4.5); // 4.5px -> 0.234375vw
    background-color: #ec1e03;
    list-style: none;
  }

  li:nth-child(1) {
    position: absolute;
    top: px-to-vw(8); // 8px -> 0.4166666667vw
    left: px-to-vw(4); // 4px -> 0.2083333333vw
    transform: rotate(55deg);
  }

  li:nth-child(2) {
    position: absolute;
    top: px-to-vw(-4); // -4px -> -0.2083333333vw
    left: px-to-vw(0);
    transform: rotate(90deg);
  }

  li:nth-child(3) {
    position: absolute;
    top: px-to-vw(-15); // -15px -> -0.78125vw
    left: px-to-vw(5); // 5px -> 0.2604166667vw
    transform: rotate(120deg);
  }

  li:nth-child(4) {
    position: absolute;
    top: px-to-vw(-21); // -21px -> -1.09375vw
    left: px-to-vw(18); // 18px -> 0.9375vw
    transform: rotate(0deg);
  }

  li:nth-child(5) {
    position: absolute;
    top: px-to-vw(-16); // -16px -> -0.8333333333vw
    left: px-to-vw(31); // 31px -> 1.614583333vw
    transform: rotate(36deg);
  }

  li:nth-child(6) {
    position: absolute;
    top: px-to-vw(-5); // -5px -> -0.2604166667vw
    left: px-to-vw(37); // 37px -> 1.927083333vw
    transform: rotate(90deg);
  }

  li:nth-child(7) {
    position: absolute;
    top: px-to-vw(8); // 8px -> 0.4166666667vw
    left: px-to-vw(34); // 34px -> 1.770833333vw
    transform: rotate(125deg);
  }
}

.circle-inner {
  position: relative;
  width: 3.9vw;
  height: 3.9vw;
  // margin-top: 2vw;
  // margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  // // background-color: #fff;
  border: 0.2vw dashed #1689ac;
  border-bottom: 0.2vw dashed rgba($color: #000000, $alpha: 0);
}

.circle-inner-inner {
  position: relative;
  width: 3.5vw;
  height: 3.5vw;
  // margin-top: 2vw;
  // margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  // // background-color: #fff;
  border: 0.4vw solid #4251da;
  border-bottom: 0.4vw solid rgba($color: #000000, $alpha: 0);
}

.circle-circle {
  position: relative;

  width: px-to-vw(8); // 7.5px -> 0.390625vw
  height: px-to-vw(8);
  border-radius: 50%;
  border: px-to-vw(2) solid #1689ac; // 
}
</style>
<!-- 大屏巡检环开发 -->
